<template>
  <a-layout id="components-layout-demo-custom-trigger" :style="{ overflow: 'auto', height: '100vh', left: 0 }">
    <a-layout-sider style="width: 15%;min-width: 15%; background: #f0f2f5">

    </a-layout-sider>
    <a-layout-sider style="width: 70%;min-width: 70%; background: #f0f2f5;margin-top: 2%;">
      <!--  <custom-mavon-editor :content="article.content"
                             :options="{editable: false,toolbarsFlag:false,
                             defaultOpen: 'preview',transition: false,subfield: false,boxShadow: false,navigation: true}"></custom-mavon-editor>-->
      <a-row style="background-color: rgb(251, 251, 251);font-size: 18px;line-height: 50px;">
        <a-col :span="1"/>
        <a-col :span="14" style="font-weight: bold;">
          <div>{{ article.title }}</div>
        </a-col>
        <a-col :span="8" style="text-align: right;">
          <label style="margin-right: 20px;">
            <span class="field"><a-icon type="calendar"/></span>
            <span class="value">{{ article.lastUpdateDate }}</span>
          </label>
          <label>
            <span class="field"><a-icon type="eye"/></span>
            <span class="value">{{ article.browseNum }}</span>
          </label>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <a-divider/>
      <mavon-editor
        :value="article.content"
        :subfield="false"
        defaultOpen="preview"
        :navigation="false"
        :toolbarsFlag="false"
        :boxShadow="false"
        :transition="false">
      </mavon-editor>
    </a-layout-sider>
  </a-layout>
</template>

<script>
import {findById} from "@/network/article";

import Vue from 'vue'
import mavonEditor from 'mavon-editor';

Vue.use(mavonEditor);

export default {
  name: "HomeArticleDetail",
  // components: {CustomMavonEditor},
  data() {
    return {
      article: {}
    }
  },
  created() {
    let id = this.$route.params.id;
    if (id) {
      findById(id).then(response => {
          this.article = response.data;
          document.title = this.article.title
        }
      )
    }
  },
  methods: {}
}
</script>
<style scoped>
.field {
  font-weight: bolder;
}

.value {
  margin-left: 5px;
}
</style>

